<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理端 - 汉中旅游</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="css/styles.css" rel="stylesheet">
    <link href="css/admin.css" rel="stylesheet">
</head>
<body>
    <div class="admin-container">
        <aside class="admin-sidebar">
            <h2>汉中旅游管理后台</h2>
            <ul class="admin-menu">
                <li><a href="#routes" class="active"><i class="fa fa-map"></i> 旅游路线管理</a></li>
                <li><a href="#culture"><i class="fa fa-university"></i> 文化活动管理</a></li>
            </ul>
        </aside>
        <main class="admin-content">
            <div class="admin-header">
                <span class="admin-title">欢迎进入管理后台</span>
                <button id="logout-btn" class="btn-logout">退出登录</button>
            </div>
            <div id="admin-main-content">
                <!-- 旅游路线订单管理表格 -->
                <div id="routes-manage-section">
                    <h2>旅游路线订单管理</h2>
                    <button class="btn-add-route"><i class="fa fa-plus"></i> 新增订单</button>
                    <table class="admin-table">
                        <thead>
                            <tr>
                                <th>订单ID</th>
                                <th>用户</th>
                                <th>路线名称</th>
                                <th>出行日期</th>
                                <th>人数</th>
                                <th>手机号</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="route-orders-tbody">
                            <!-- 由js动态渲染 -->
                        </tbody>
                    </table>
                    <div id="route-orders-pagination" class="pagination"></div>
                </div>
                <!-- 文化活动订单管理表格，初始隐藏 -->
                <div id="culture-manage-section" style="display:none;">
                    <h2>文化活动订单管理</h2>
                    <div class="filter-group">
                        <button class="filter-btn active" data-status="all">全部状态</button>
                        <button class="filter-btn" data-status="pending">待使用</button>
                        <button class="filter-btn" data-status="certain">已完成</button>
                        <button class="filter-btn" data-status="refund">退款中</button>
                        <button class="filter-btn" data-status="expire">已过期</button>
                    </div>
                    <button class="btn-add-route"><i class="fa fa-plus"></i> 新增订单</button>
                    <table class="admin-table">
                        <thead>
                            <tr>
                                <th>订单ID</th>
                                <th>用户</th>
                                <th>活动名称</th>
                                <th>出行日期</th>
                                <th>状态</th>
                                <th>手机号</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="activity-orders-tbody">
                            <!-- 由js动态渲染 -->
                        </tbody>
                    </table>
                    <div id="activity-orders-pagination" class="pagination"></div>
                </div>
            </div>
        </main>
    </div>

    <!-- 旅游路线订单模态框 -->
    <div id="add-route-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h2>新增旅游路线订单</h2>
            <form id="add-route-form">
                <div class="form-group">
                    <label for="route-username">用户名</label>
                    <select id="route-username" required>
                        <option value="">请选择用户</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="route-name">路线名称</label>
                    <select id="route-name" required>
                        <option value="culture">自然风光之旅</option>
                        <option value="nature">历史文化之旅</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="route-date">出行日期</label>
                    <input type="date" id="route-date" required>
                </div>
                <div class="form-group">
                    <label for="route-people">人数</label>
                    <input type="number" id="route-people" required>
                </div>
                <div class="form-group">
                    <label for="route-phone">手机号</label>
                    <input type="tel" id="route-phone" required>
                </div>
                <button type="submit" class="btn-submit">提交</button>
            </form>
        </div>
    </div>

    <!-- 文化活动订单模态框 -->
    <div id="add-activity-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h2>新增文化活动订单</h2>
            <form id="add-activity-form">
                <div class="form-group">
                    <label for="activity-username">用户名</label>
                    <select id="activity-username" required>
                        <option value="">请选择用户</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="activity-name">活动名称</label>
                    <select id="activity-name" required>
                        <option value="hanfu">汉服体验</option>
                        <option value="calligraphy">书法体验</option>
                        <option value="tea">茶艺体验</option>
                        <option value="food">美食制作</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="activity-date">出行日期</label>
                    <input type="date" id="activity-date" required>
                </div>
                <div class="form-group">
                    <label for="activity-phone">手机号</label>
                    <input type="tel" id="activity-phone" required>
                </div>
                 <div class="form-group">
                    <label for="activity-email">邮箱</label>
                    <input type="email" id="activity-email" required>
                </div>
                <button type="submit" class="btn-submit">提交</button>
            </form>
        </div>
    </div>
    <script>
    // 添加过期时间检查函数
    function isDataExpired(timestamp) {
        if (!timestamp) return true;
        const now = new Date().getTime();
        return now > timestamp;
    }

    // 添加带过期时间的获取函数
    function getItemWithExpiry(key) {
        const itemStr = localStorage.getItem(key);
        if (!itemStr) return null;
        
        const item = JSON.parse(itemStr);
        if (isDataExpired(item.timestamp)) {
            localStorage.removeItem(key);
            return null;
        }
        return item.value;
    }

    // 权限校验：userId为100才可进入
    (function() {
        let userInfoStr = getItemWithExpiry('userInfo');
        let userInfo = null;
        try {
            userInfo = userInfoStr ? JSON.parse(userInfoStr) : null;
        } catch(e) {
            userInfo = null;
        }
        if (!userInfo || userInfo.userId !== 100) {
            window.location.href = 'login.html';
        }
    })();
    </script>
    <script src="js/admin.js"></script>

    <!-- 编辑旅游路线订单模态框 -->
    <div id="edit-route-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h2>编辑旅游路线订单</h2>
            <form id="edit-route-form">
                <input type="hidden" id="edit-route-id">
                <div class="form-group">
                    <label for="edit-route-username">用户名</label>
                    <input type="text" id="edit-route-username" required>
                </div>
                <div class="form-group">
                    <label for="edit-route-name">路线名称</label>
                    <select id="edit-route-name" required>
                        <option value="culture">自然风光之旅</option>
                        <option value="nature">历史文化之旅</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-route-date">出行日期</label>
                    <input type="date" id="edit-route-date" required>
                </div>
                <div class="form-group">
                    <label for="edit-route-people">人数</label>
                    <input type="number" id="edit-route-people" required>
                </div>
                <div class="form-group">
                    <label for="edit-route-phone">手机号</label>
                    <input type="tel" id="edit-route-phone" required>
                </div>
                <button type="submit" class="btn-submit">保存修改</button>
            </form>
        </div>
    </div>

    <!-- 编辑文化活动订单模态框 -->
    <div id="edit-activity-modal" class="modal">
        <div class="modal-content">
            <span class="close-btn">&times;</span>
            <h2>编辑文化活动订单</h2>
            <form id="edit-activity-form">
                <input type="hidden" id="edit-activity-id">
                <div class="form-group">
                    <label for="edit-activity-username">用户名</label>
                    <input type="text" id="edit-activity-username" required>
                </div>
                <div class="form-group">
                    <label for="edit-activity-name">活动名称</label>
                    <select id="edit-activity-name" required>
                        <option value="hanfu">汉服体验</option>
                        <option value="calligraphy">书法体验</option>
                        <option value="tea">茶艺体验</option>
                        <option value="food">美食制作</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="edit-activity-date">出行日期</label>
                    <input type="date" id="edit-activity-date" required>
                </div>
                <div class="form-group">
                    <label for="edit-activity-phone">手机号</label>
                    <input type="tel" id="edit-activity-phone" required>
                </div>
                 <div class="form-group">
                    <label for="edit-activity-email">邮箱</label>
                    <input type="email" id="edit-activity-email" required>
                </div>
                <button type="submit" class="btn-submit">保存修改</button>
            </form>
        </div>
    </div>

    <!-- 通用确认删除模态框 -->
    <div id="confirm-delete-modal" class="modal">
        <div class="modal-content" style="max-width:340px;text-align:center;">
            <h2 style="color:#f44336;">警告</h2>
            <p style="margin:24px 0;">确定要删除该订单吗？此操作不可恢复！</p>
            <div style="display:flex;gap:16px;justify-content:center;">
                <button id="cancel-delete-btn" class="btn-logout" style="background:#aaa;">取消</button>
                <button id="confirm-delete-btn" class="btn-logout">确定</button>
            </div>
        </div>
    </div>

    <!-- 首页欢迎模态框 -->
    <div id="welcome-modal" class="modal">
        <div class="modal-content" style="max-width:600px;">
            <span class="close-btn">&times;</span>
            <div style="text-align:center;margin-bottom:24px;">
                <h2 style="color:#2D5B3E;margin-bottom:8px;">欢迎使用汉中旅游管理后台</h2>
                <p style="color:#64748b;font-size:16px;">管理员，您好！</p>
            </div>
            
            <div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:24px;">
                <div style="background:#f8f9fa;padding:20px;border-radius:8px;text-align:center;">
                    <i class="fa fa-map" style="font-size:32px;color:#2D5B3E;margin-bottom:12px;"></i>
                    <h3 style="margin:8px 0;color:#2D5B3E;">旅游路线管理</h3>
                    <p style="margin:0;color:#64748b;font-size:14px;">管理旅游路线订单信息</p>
                </div>
                <div style="background:#f8f9fa;padding:20px;border-radius:8px;text-align:center;">
                    <i class="fa fa-university" style="font-size:32px;color:#2D5B3E;margin-bottom:12px;"></i>
                    <h3 style="margin:8px 0;color:#2D5B3E;">文化活动管理</h3>
                    <p style="margin:0;color:#64748b;font-size:14px;">管理文化活动订单信息</p>
                </div>
            </div>
            
            <div style="background:#e8f5e8;padding:16px;border-radius:8px;border-left:4px solid #2D5B3E;">
                <h4 style="margin:0 0 8px 0;color:#2D5B3E;">系统功能</h4>
                <ul style="margin:0;padding-left:20px;color:#475569;">
                    <li>查看和管理旅游路线订单</li>
                    <li>查看和管理文化活动订单</li>
                    <li>新增、编辑、删除订单信息</li>
                    <li>按状态筛选文化活动订单</li>
                </ul>
            </div>
            
            <div style="text-align:center;margin-top:24px;">
                <button id="welcome-close-btn" class="btn-submit" style="min-width:120px;">开始使用</button>
            </div>
        </div>
    </div>
</body>
</html> 